<template>
  <div class="mediate-main">
    <div class="item-top-box">
      <div class="item-top-box-title"></div>
      <div class="detail-btn">详情<i class="el-icon-caret-right"></i></div>
    </div>
    <div class="item-center">
      <dv-border-box-7 :color="['#0054A3', '#2BCCFF']">
        <div class="action-group-laidian">
          <div class="actions-laidian">
            <div class="item">
              <el-dropdown trigger="click" @command="handleCommand">
                <span class="el-dropdown-link">
                  {{ County }}<i class="el-icon-arrow-down el-icon-caret-bottom"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="区县">区县</el-dropdown-item>
                  <el-dropdown-item command="吉州区">吉州区</el-dropdown-item>
                  <el-dropdown-item command="金刚山区">井冈山市</el-dropdown-item>
                  <el-dropdown-item command="奉和县">奉和县</el-dropdown-item>
                  <el-dropdown-item command="遂川县">遂川县</el-dropdown-item>
                  <el-dropdown-item command="永丰县">永丰县</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
            <div class="item">
              <el-dropdown trigger="click">
                <span class="el-dropdown-link">
                  2021年<i class="el-icon-arrow-down el-icon-caret-bottom"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>2020年</el-dropdown-item>
                  <el-dropdown-item>2021年</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
            <div class="item">
              <el-dropdown trigger="click">
                <span class="el-dropdown-link">
                  1月<i class="el-icon-arrow-down el-icon-caret-bottom"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>1月</el-dropdown-item>
                  <el-dropdown-item>2月</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
            <div class="item">
              <span class="el-dropdown-link">
                  至
                </span>
            </div>
            <div class="item">
              <el-dropdown trigger="click">
                <span class="el-dropdown-link">
                  5月<i class="el-icon-arrow-down el-icon-caret-bottom"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>5月</el-dropdown-item>
                  <el-dropdown-item>6月</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </div>
        <div id="mediate-echarts" v-show="County == '区县'"></div>
        <dv-scroll-board
          v-show="County != '区县'"
          :config="config"
          style="width: 90%; height: 75%;margin: 0 auto"
          class="data-v-list"
        ></dv-scroll-board>
      </dv-border-box-7>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

// 来电信息涉及矛盾调解情况
export default {
  name: 'Mediate',
  data () {
    return {
      County: '区县',
      config: {
        header: ['地区', '来电数量', '地区', '来电数量'],
        data: [
          ['行1列1', '行1列2', '行1列3行1列3行1列3', '行1列4'],
          ['行2列1', '行2列2', '行2列3', '行2列4'],
          ['行3列1', '行3列2', '行3列3', '行3列4'],
          ['行4列1', '行4列2', '行4列3', '行4列4'],
          ['行5列1', '行5列2', '行5列3', '行5列4'],
          ['行6列1', '行6列2', '行6列3', '行6列4'],
          ['行7列1', '行7列2', '行7列3', '行7列4'],
          ['行8列1', '行8列2', '行8列3', '行8列4'],
          ['行9列1', '行9列2', '行9列3', '行9列4'],
          [
            '行10列1',
            '行10列2',
            '行10列3',
            '行10列4行10列4行10列4行10列4行10列4行10列4'
          ]
        ],
        headerBGC: '#040949',
        oddRowBGC: '#030739',
        evenRowBGC: '#08134B',
        headerHeight: '50',
        columnWidth: [200, 200, 300, 200],
        align: ['left', 'left', 'left', 'left']
      }
    }
  },
  mounted () {
    // 基于准备好的dom，初始化echarts实例
    let myChart = echarts.init(document.getElementById('mediate-echarts'))
    // 绘制图表
    let option = {
      // title: {
      //   text: 'Stacked Area Chart'
      // },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        }
      },
      legend: {
        data: [
          {name: '信访量', textStyle: { color: '#FFFFFF' }},
          {name: '呼入量', textStyle: { color: '#FFFFFF' }}
        ],
        top: 'top',
        icon: 'circle'
      },
      // toolbox: {
      //   // feature: {
      //   //   saveAsImage: {}
      //   // }
      // },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          data: ['2022-1', '2022-2', '2022-3', '2022-4', '2022-5'],
          axisLabel: { textStyle: { fontSize: 14, color: '#fff' } }
        }
      ],
      yAxis: [
        {
          type: 'value',
          axisLabel: { textStyle: { fontSize: 14, color: '#fff' } }
        }
      ],
      series: [
        {
          name: '信访量',
          type: 'line',
          stack: 'Total',
          areaStyle: {},
          emphasis: {
            focus: 'series'
          },
          data: [120, 132, 101, 134, 90, 230, 210],
        },
        {
          name: '呼入量',
          type: 'line',
          stack: 'Total',
          areaStyle: {},
          emphasis: {
            focus: 'series'
          },
          data: [220, 182, 191, 234, 290, 330, 310]
        }
      ]
    }
    myChart.setOption(option)
  },
  methods: {
    handleCommand(value) {
      console.log(value)
      this.County = value
    }
  }
}
</script>

<style lang="less" scoped>
.mediate-main {
  height: 92%;
  width: 90%;
  padding: 0px 20px 20px 20px;
}
.mediate-main .item-top-box {
  display: flex;
  flex-direction: row;
  position: relative;
}
.mediate-main .item-top-box-title {
  background-image: url('~@/assets/title5.png');
  background-repeat:no-repeat;
  background-size:100% 100%;
  -moz-background-size:100% 100%;
  height: 32px;
  width: 100%;
}
/* 详情 */
.mediate-main .item-top-box .detail-btn {
  font-size: 16px;
  font-family: BBT;
  font-weight: normal;
  color: #2BCCFF;
  position:absolute;
  right:0;
  cursor: pointer;
}
/* 内容区域 */
.mediate-main .item-center {
  height: 90%;
  width: 100%;
  padding: 5px 0px;
  .action-group-laidian {
    padding: 20px 20px 0px 20px;
    .actions-laidian {
      display: flex;
      justify-content: space-between;
      height: 30px;
      align-items: flex-start;
      .item {
        margin-left: 10px;
      }
    }
  }
  #mediate-echarts {
    height: 80%;
    widows: 100%;
  }
}
// 下拉样式
.el-dropdown {
  display: block;
}
/* 下拉央视 */
.el-dropdown-link {
  font-size: 16px;
  font-family: V07;
  font-weight: normal;
  color: #FFFFFF;
}
.el-icon-arrow-down {
  margin-left: 10px;
}
.el-dropdown-menu {
  background: #050A49;
  border: solid 0.1px #244d5a;
  font-family: V07;
  color: #FFFFFF;
  font-size: 16px;
  padding: 0;
}
.el-dropdown-menu /deep/ .popper__arrow {
  display: none;
}
.el-dropdown-menu .el-dropdown-menu__item {
  color: #FFFFFF;
  line-height: 32px;
  padding: 0 10px !important;
  border-bottom: solid 1px #244d5a;
}
.el-dropdown-menu .el-dropdown-menu__item:nth-last-child(2) {
  border: none;
}
.el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover {
  background: #050A49;
  color: #FFFFFF;
}
</style>
